<template>
    <div>
        <h2>信息展示</h2>
        <h2>{{a.userInfo}}</h2>
        <div>
            房价名称<input type="text" v-model="list.Name"/>
            <input type="button" value="查询" class="btn btn-info" @click="showall"/>

            <input type="button" value="导出" class="btn btn-success" @click="exportfn"/>
        </div>
        <table class="table table-bordered">
            <tbody>

                <tr>
                    <td>房价名称</td>
                    <td>价格</td>
                    <td>联系方式</td>
                    <td>地址</td>
                    <td>照片</td>
                    <td>状态</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{item.Name}}</td>
                    <td>{{item.Money}}</td>
                    <td>{{item.Phone.substring(0,3)+'****'+item.Phone.substring(6)}}</td>
                    <td>{{item.Addr}}</td>
                    <td><a :href="item.Photo">查看</a></td>
                    <td>{{item.Stare==1 ? '上架':'下架'}}</td>
                    <td>{{moment(item.CreateTime).format('YYYY-MM-DD')}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger"/>
                        <input type="button" value="修改" class="btn btn-success" @click="update(item.Id)"/>

                        <input type="button" value="下架" class="btn btn-parmary" 
                            v-if="item.Stare == 1"
                            @click="updatestare(item.Id,0)"/>

                            <input type="button" value="上架" class="btn btn-info" 
                            v-if="item.Stare == 0"
                            @click="updatestare(item.Id,1)"/>

                    </td>
                </tr>
            </tbody>
        </table>

        <div>

            <span>共<b>{{data.totaCount}}</b>条</span>
            <span>每页<b>{{list.PageSizer}}</b>条</span>
            <span>共<b>{{list.PageIdenx}}/{{data.totaPage}}</b>页</span>

            <input type="button" value="首页" @click="sopage(1)"/>
            <input type="button" value="上一页" @click="sopage(list.PageIdenx-1)"/>
            <span v-for="item in data.totaPage" @click="sopage(item)">{{item}}</span>
            <input type="button" value="下一页" @click="sopage(list.PageIdenx+1)"/>
            <input type="button" value="尾页"@click="sopage(data.totaPage)"/>

            <select v-model="list.PageSizer" @change="showall">
                <option :value="item" v-for="item in arr">每页{{item}}条</option>
            </select>

        </div>

    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';
import { useUserStore } from '@/stores/user';

let router = useRouter();
let route = useRoute();

const a = useUserStore();

let list:any = reactive({
    PageIdenx:1,
    PageSizer:2,
    Name:''
})

let data:any = reactive({
    list:[],
    totaCount:0,
    totaPage:0
})

onMounted(()=>{
    if(a.userInfo.Id)
    {
        showall();
    }
    else
    {
        router.push("/admin")
    }
   
})

let arr:any=ref([2,4,6]);


const sopage = (num:any)=>{
    if(num<1)
    {
        list.PageIdenx = 1;
        return;
    }
    if(num>data.totaPage)
    {
        list.PageIdenx = data.totaPage;
        return;
    }
    list.PageIdenx=num;
    showall();
}

const showall = ()=>{
    axios({
        url:'http://localhost:5214/api/House/ShowHouuse',
        method:'get',
        params:list
    })
    .then((res)=>{
        Object.assign(data,res.data)
    })
    .catch((err)=>{
        console.log(err)
    })
}

const updatestare = (id:any,Stare:any)=>{
    let f = confirm('请问您确定要修改状态吗？');
    if(f)
    {
        axios({
            url:'http://localhost:5214/api/House/StareHouse',
            method:'post',
            params:{id:id,stare:Stare}
        })
        .then((res)=>{
            if(res.data > 0)
            {
                alert('修改成功')
                showall();
                return;
            }
            else
            {
                alert('修改失败')
                return;
            }
        })
        .catch((err)=>{
            console.log(err);
        })
    }
}

const update = (id:any)=>{
    router.push({
        path: '/xiu',
        query:{id:id}
    })
}




//导出
const exportfn = ()=>{
    location.href = `http://localhost:5214/api/House/ExportExec?PageIdenx=${list.PageIdenx}&PageSizer=${list.PageSizer}&Name=${list.Name}`
}










</script>

<style scoped>
b{
    color: red;
}

span{
    margin: 0 10px;
}

input[type="button"]
{
    margin: 0 5px;
}



</style>